<template>
	<view>
		<!-- 书籍列表 -->
		<view class="book-list">
			<!-- 类型 -->
			<scroll-view class="left-type-view" scroll-y="true" :style="{ height: wh + 'px' }">
				<view :class="['left-type-scroll-view-item',active === '考研' ? 'active' : '']"
					@click="getBookListData('考研')">考研英语</view>
				<view :class="['left-type-scroll-view-item',active === '四级' ? 'active' : '']"
					@click="getBookListData('四级')">四级</view>
				<view :class="['left-type-scroll-view-item',active === '六级' ? 'active' : '']"
					@click="getBookListData('六级')">六级</view>
			</scroll-view>
			<!-- 类型书籍 -->
			<scroll-view scroll-y="true" :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
				<view class="book-list-view-item" v-for="item in bookListData" :key="item.id" @click="gotoBookDetail(item.id,item.name)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 书籍列表数据
				bookListData: [],
				// 当前设备可用高度
				wh: 0,
				active: '',
				scrollTop: 0,
			};
		},
		onLoad() {
			this.getBookListData('考研');
			const sysInfo = uni.getSystemInfoSync();
			this.wh = sysInfo.windowHeight;
		},
		methods: {
			// 获取书籍列表数据
			async getBookListData(type) {
				// 获取书籍列表数据
				const {	data: res } = await uni.$http.get("/api/book/list?type=" + type);
				// 请求失败
				if (res.errno !== 0) return uni.$showMsg();
				// 请求成功
				this.bookListData = await res.data;
				this.active = type;
				this.scrollTop = this.scrollTop === 0 ? 1 : 0;
			},
			//跳转到书籍详细页面
			gotoBookDetail(id,name){
				uni.navigateTo({
					url:'/subpkg/book_detail/book_detail?book_id=' + id+'&book_name=' + name
				});
			}
		},
	};
</script>

<style lang="scss">
	.book-list {
		display: flex;
	}

	.left-type-view {
		width: 120px;
	}

	.left-type-scroll-view-item {
		background-color: #f7f7f7;
		line-height: 60px;
		text-align: center;
		font-size: 12px;

		&.active {
			background-color: #fff;
			position: relative;

			&:before {
				content: " ";
				display: block;
				width: 3px;
				height: 30px;
				background-color: #ff5e5e;
				position: absolute;
				top: 50%;
				left: -0;
				transform: translateY(-50%);
			}
		}
	}

	.book-list-view-item {
		text-align: left;
		padding: 15px 15px;
	}
</style>
